<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="gsw945" />
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
    <title>Phaser Demo With Parcel</title>
</head>
<body>
    <div id="game"></div>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/phaser/3.52.0/phaser.min.js" type="text/javascript"></script>
    <script>

        const phaserConfig = {
            type: Phaser.AUTO,
            parent: "game",
            width: 1280,
            height: 720,
            backgroundColor: "#5DACD8",
            scene: {
                init: initScene,
                preload: preloadScene,
                create: createScene,
                update: updateScene
            }
        };

        const game = new Phaser.Game(phaserConfig);

        var isClicking = false;
        var swipeDirection;
        var plane;

        function initScene() { }

        function preloadScene() {
            this.load.image('plane', '/assets/demos/budbrain_chick.png');
        }

        function createScene() {

            plane = this.add.sprite(640, 360, "plane");
            plane.setScale(0.4);

        }

        function updateScene() {

            if(!this.input.activePointer.isDown && isClicking == true) {
                plane.setData("positionY", this.input.activePointer.position.y);
                isClicking = false;
            } else if(this.input.activePointer.isDown && isClicking == false) {
                isClicking = true;
            }

            if(Math.abs(plane.y - plane.getData("positionY")) <= 10) {
                plane.y = plane.getData("positionY");
            } else if(plane.y < plane.getData("positionY")) {
                plane.y += 5;
            } else if(plane.y > plane.getData("positionY")) {
                plane.y -= 5;
            }

        }

    </script>
</body>
</html>